<!--
  文件描述：分页
  创建时间：2023/9/7 9:53
  创建人：二
-->
<template>
  <el-pagination
    class="m-pagination"
    background
    :layout="layout"
    :page-size="pageSize"
    :current-page="currentPage"
    :total="total"
    :pager-count="5"
    @size-change="sizeChange"
    @current-change="currentChange"
  />
</template>

<script>
export default {
  name: 'MPagination',
  props: {
    // 当前页数
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页显示数据个数
    pageSize: {
      type: Number,
      default: 10
    },
    // 总数据量
    total: {
      type: Number
    },
    // 组件布局，子组件名用逗号分隔
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  data() {
    return {}
  },
  computed: {
  },
  methods: {
    /**
     * 监听pageSize 改变时会触发
     * @param {Number} pageSize 每页数据条数
     */
    sizeChange(pageSize) {
      this.$emit('update:pageSize', pageSize);
      this.$emit('update:currentPage', 1)
      this.$emit('pagination-change', {
        pageSize,
        currentPage: 1
      });
    },
    /**
     * 监听分页改变
     * @param {Number} currentPage 当前页数
     */
    currentChange(currentPage) {
      this.$emit('update:pageSize', this.pageSize);
      this.$emit('update:currentPage', currentPage)
      this.$emit('pagination-change', {
        currentPage,
        pageSize: this.pageSize
      });
    }
  }
}
</script>

<style scoped>
  .m-pagination {
    text-align: right;
    margin: 15px 0;
  }
</style>
